<template>
  <div id="app">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#javascript:void(0);">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#javascript:void(0);">Dashboard</a></li>
            <li><a href="#javascript:void(0);">Settings</a></li>
            <li><a href="#javascript:void(0);">Profile</a></li>
            <li><a href="#javascript:void(0);">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" v-model="searchObj.search" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li :class="{active: isActive1}" @click="isActive1=true;isActive2=false;isActive3=false;">
              <router-link to="/in_theaters">正在热映</router-link>
            </li>
            <li :class="{active: isActive2}" @click="isActive1=false;isActive2=true;isActive3=false;">
              <router-link to="/coming_soon">即将上映</router-link>
            </li>
            <li :class="{active: isActive3}" @click="isActive1=false;isActive2=false;isActive3=true;">
              <router-link to="/top250">TOP250</router-link>
            </li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <router-view :S_PATH="SERVER_PATH" :page="page" :searchObj="searchObj"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from './components/Search'

export default {
  name: 'app',
  data () {
    return {
      SERVER_PATH: 'http://api.douban.com',
      isActive1: true,
      isActive2: false,
      isActive3: false,
      searchObj: {
        search:''
      },
      page: {
        count:5,//每页显示数量
        start:0,//请求起始项
        current:1,//当前第几页
        totalCount:0,//总记录数
        totalPage:0,//总页数
        type: ''
      }
    }
  },
  watch:{

  },
  methods: {

  },
  mounted () {
    var that = this;

  }

}

</script>

<style>
body {
	padding-top: 50px;
}
/*
 * Global add-ons
 */

.sub-header {
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */

.navbar-fixed-top {
	border: 0;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */

.sidebar {
	display: none;
}

@media (min-width: 768px) {
	div.sidebar {
		position: fixed;
		top: 51px;
		bottom: 0;
		left: 0;
		z-index: 1000;
		display: block;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto;
		/* Scrollable contents if viewport is shorter than content. */
		background-color: #f5f5f5;
		border-right: 1px solid #eee;
	}
}

/* Sidebar navigation */

.nav-sidebar {
	margin-right: -21px;
	/* 20px padding + 1px border */
	margin-bottom: 20px;
	margin-left: -20px;
}

.nav-sidebar > li > a {
	padding-right: 20px;
	padding-left: 20px;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
	color: #fff;
	background-color: #428bca;
}

/*
 * Main content
 */

.main {
	padding: 20px;
}

@media (min-width: 768px) {
	div.main {
		padding-right: 40px;
		padding-left: 40px;
	}
}

.main .page-header {
	margin-top: 0;
}

/*
 * Placeholder dashboard ideas
 */

.placeholders {
	margin-bottom: 30px;
	/*text-align: center;*/
}

.placeholders h4 {
	margin-bottom: 0;
}

.placeholder {
	margin-bottom: 20px;
}

.placeholder img {
	display: inline-block;
	border-radius: 50%;
}

.media {
	padding: 5px 0;
}

.media img {
	height: 120px;
}

.media p {
	margin-top: 10px;
	margin-bottom: 5px;
}


.loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3455;
	background-color: rgba(100,100,100,0.6);
	padding-top: 200px;
}
/*loading动画*/
.spinner {
	margin: 100px auto;
	width: 100px;
	height: 100px;
	position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
	width: 18px;
	height: 18px;
	background-color: greenyellow;

	border-radius: 100%;
	position: absolute;
	-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
	animation: bouncedelay 1.2s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.spinner .spinner-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

.container2 {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}

.container3 {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.container3 .circle1 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.container1 .circle2 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.container2 .circle2 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

.container3 .circle2 {
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
}

.container1 .circle3 {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}

.container2 .circle3 {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}

.container3 .circle3 {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}

.container1 .circle4 {
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
}

.container2 .circle4 {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
}

.container3 .circle4 {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0.0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
	0%, 80%, 100% {
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 40% {
		  transform: scale(1.0);
		  -webkit-transform: scale(1.0);
	  }
}
.tc {
	text-align: center;
}

</style>
